<template>
  <div>
    <el-card shadow="always">
      <el-form ref="operalog" :inline="true" :model="operalog">
        <el-form-item label="操作人:" prop="userName">
          <el-input v-model="operalog.userName" placeholder="操作人" type="text"></el-input>
        </el-form-item>
        <el-form-item label="IP:" prop="ip">
          <el-input v-model="operalog.ip" placeholder="IP" type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateTime"
            :picker-options="pickerOptions"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="-"
            start-placeholder="开始日期"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button type="primary" @click="search"><i class="el-icon-search"></i> 搜索</el-button>
          <el-button @click="resetForm('operalog')"><i class="el-icon-refresh"></i> 重置</el-button>&nbsp;&nbsp;&nbsp;
          <el-dropdown>
            <el-button>更多 <i class="el-icon-arrow-down"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="dels">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card class="box-card">
      <el-table ref="multipleTable" v-loading="loading" :data="operalogs" style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column prop="id" type="selection" width="55"></el-table-column>
        <el-table-column
          width="80"
          label="序号">
          <template slot-scope="scop">
            {{ scop.$index + (currentPage - 1) * pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="userName" width="120"></el-table-column>
        <el-table-column label="请求地址" prop="requestUri" width="400"></el-table-column>
        <el-table-column label="请求类型" prop="httpMethod" width="120"></el-table-column>
        <el-table-column label="IP" prop="requestIp" width="150"></el-table-column>
        <el-table-column label="操作描述" prop="description" width="240"></el-table-column>
        <el-table-column label="类型" width="80">
          <template slot-scope="scope">
            <el-tag v-if=" scope.row.type == 200" size="medium">{{ scope.row.type }}</el-tag>
            <el-tag v-else size="danger">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="请求方法" prop="actionMethod" width="200"></el-table-column>
        <el-table-column label="开始时间" prop="startTime" width="200"></el-table-column>
        <el-table-column label="消耗时间" width="120">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.consumingTime }}ms</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="终端|浏览器" prop="ua" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="medium" style="color: red" type="text" @click="del(scope.row.id)">删除</el-button>
            <el-button size="medium" type="text" @click="view(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
    <el-drawer :before-close="handleClose" :direction="direction" :title="opLog.requestUri" :visible.sync="drawer">
      <el-row :gutter="20" style="margin: 10px 15px ">
        <el-col :span="24">
          <p>执行方法：</p>
        </el-col>
        <el-col :span="24">
          <el-card class="box-card1">{{ opLog.actionMethod }}</el-card>
        </el-col>
        <el-col :span="24">
          <p>请求参数：</p>
        </el-col>
        <el-col :span="24">
          <el-card class="box-card1">{{ opLog.params }}</el-card>
        </el-col>
        <el-col :span="24">
          <p>类路径：</p>
        </el-col>
        <el-col :span="24">
          <el-card class="box-card1">{{ opLog.classPath }}</el-card>
        </el-col>
        <el-col :span="24">
          <p>响应结果：</p>
        </el-col>
        <el-col :span="24">
          <el-card class="box-card1">{{ opLog.result }}</el-card>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>
<script>
import './css/log.css'
import operation from "../../api/monitoringmanagement/operationlog/operationLog";

export default {
  name: 'opLog',
  computed: {
    dateTime: {
      get() {
        if (this.operalog.startTime && this.operalog.endTime) {
          return [this.operalog.startTime, this.operalog.endTime]
        } else {
          return []
        }
      },
      set(v) {
        this.operalog.startTime = v[0]
        this.operalog.endTime = v[1]
      }
    }
  },
  data() {
    return {
      loading: false,// 加载条
      currentPage: 1, //当前页
      pageSize: 5,  //一页几条
      total: 0,  //总条数
      operalog: {userName: null, ip: null, startTime: null, endTime: null},
      operalogs: [],
      opLog: {},
      multipleSelection: [],
      visible: false,
      drawer: false,
      direction: 'rtl',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    show() {
      this.loading = true
      operation.operaLog(this.currentPage, this.pageSize, this.operalog).then(({data}) => {
        this.operalogs = data.data.records
        this.total = data.data.total
        console.log(data.data)
        this.loading = false
      })
    },
    search() {
      this.loading = true
      this.show();
    },
    view(rows) {
      this.drawer = true
      this.opLog = rows
      console.log(this.opLog)
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        operation.delById(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.show()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    dels() {
      this.$confirm('此操作将永久删除选择的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        operation.delByIds(this.multipleSelection).then(res => {
          if (res.data.code === 200) {
            if (res.data.data === "删除成功") {
              this.$message({
                message: res.data.data,
                type: 'success'
              });
            } else {
              this.$message({
                message: res.data.data,
                type: 'warning'
              });
            }
          } else {
            this.$message.error(res.data.message);
          }
          this.show()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.loading = true
      this.show()
    }
    ,
    handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this.show()
    }
    ,
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
    ,
    resetForm(operalog) {
      this.$refs[operalog].resetFields();
      this.operalog.startTime = null
      this.operalog.endTime = null
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    }
  },
  created() {
    this.loading = true
    this.show()
  }
}
</script>

<style scoped>
.box-card1 {
  background-color: #e2e3e5;
  word-break: break-all;
  word-wrap: break-word
}
</style>
